<page-header [title]="'事件列表'">
    <nz-card [nzBordered]="false" class>
      <form nz-form [nzLayout]="'inline'" class="search__form" action="search">
        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="Name">事件名称</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="q.Name" name="Name" #UserName placeholder="请输入" />
              </nz-form-control>
            </nz-form-item>
          </div>


          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="Name">规则</nz-form-label>
              <nz-form-control>
                <nz-select nzShowSearch nzAllowClear nzPlaceHolder="选择规则" [(ngModel)]="q.RuleId" name="RuleId">
                  <ng-container *ngFor="let o of rules">
                    <nz-option [nzValue]="o.ruleId" [nzLabel]="o.name"></nz-option>
                  </ng-container>
                </nz-select>

              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="Creator">创建对象</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="q.CreatorName" (input)="onInput($event)" (ngModelChange)="onChange($event)" name="CreatorName" placeholder="请输入"  [nzAutocomplete]="auto"/>
                <input type="hidden" [(ngModel)]="q.Creator"  name="Creator" placeholder="请输入"  />

                <nz-autocomplete #auto>
                  <nz-auto-option *ngFor="let option of devices" [nzValue]="option.name">{{ option.name }}</nz-auto-option>
                </nz-autocomplete>

              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
            <nz-form-item>
              <nz-form-label nzFor="CreatTime">创建时间</nz-form-label>
              <nz-form-control>
                <nz-range-picker [nzFormat]="dateFormat" [(ngModel)]="q.CreatTime" name="CreatTime" placeholder="请输入"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
  
          <div nz-col [nzSpan]="expandForm ? 24 : 8" [class.text-right]="expandForm">
            <button nz-button type="submit" [nzType]="'primary'" (click)="getData()">搜索</button>
            <!--<button nz-button type="submit" (click)="getData()" [nzType]="'primary'" [nzLoading]="loading">查询</button>-->
            <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
            <a (click)="expandForm = !expandForm">
              {{ expandForm ? '收起' : '展开' }}
              <i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
            </a>
          </div>
        </div>
      </form>
      <!--<button nz-button [nzType]="'primary'" [routerLink]="['/manage/user/userform']" [queryParams]="{Id:-1}">
          <i nz-icon nzType="plus"></i>
          <span>{{ 'button.new' | translate }}</span>
        </button>-->
      <!-- <button nz-button [nzType]="'primary'" (click)="openComponent(-1)" acl [acl-ability]="1">
          <i nz-icon nzType="plus"></i>
          <span>{{ 'button.new' | translate }}</span>
        </button> -->

      <ng-container *ngIf="selectedRows.length > 0">
        <button nz-button>批量操作</button>
        <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
          更多操作
          <i nz-icon nzType="down"></i>
        </button>
        <nz-dropdown-menu #batchMenu="nzDropdownMenu">
          <ul nz-menu>
            <!--<li nz-menu-item (click)="remove()">删除</li>
              <li nz-menu-item (click)="approval()">批量审批</li>-->
          </ul>
        </nz-dropdown-menu>
      </ng-container>
  
      <st #st [columns]="columns" [data]="url" ps="10" [page]="page" [req]="req" [res]="res"   [expand]="expand" expandAccordion>
        <ng-template #expand let-item let-index="index" let-column="column">
          <nz-card nzTitle="描述">
            {{ item.eventDesc }}
          </nz-card>
          <nz-card nzTitle="输入值">
            {{ item.mataData }}
          </nz-card>
     
        </ng-template>
      </st>
    </nz-card>
  </page-header>
  